<template>
	<div class="pages">
		<mescroll-uni @init="mescrollInit" :top="306" @down="downCallback"  @up="upCallback">
			<view class="items" v-for="(items,index) in dadaList" :key="index"
				@click="toNewDetails('/pages/home/libraryCom/LibraryFormsMaterialsDetalis',items.id)">
				<view class="itemsLeft" @click.stop="$imgShow(items.cover)">
					<image :src="items.cover" mode="" style="width: 100%;height: 100%;" v-if="items.cover"></image>
					<image src="@/static/la.png" mode="" style="width: 100%;height: 100%;" v-else></image>   
				</view>
				<view class="itemsRight">
					<view class="itemsRightTxt">
						{{hotLength(items.title,35) || ''}}
						<!-- Insurance Licence Exam instruction -->
					</view>
					<view class="itemsRightDate">
						<!-- Some description about the document. -->
						{{items.abstracts || ''}}
					</view>
				</view>
			</view>
		</mescroll-uni>
	</div>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				newUrl: 0, //0为新接口1为老接口
				searchKey: '',
				dadaList: [],
				parentCategoryId: '1722173785479192577', //一级分类id
				childCategoryId: '', //二级分类id
				pager: {
					currentPage: 1,
					maxResultCount: 10
				},
			}
		},
		created() {
			// this.getList()
		},
		methods: {

			// 文字超出打点
			hotLength(val, len) {
				if (val.length > len) {
					return `${val.substring(0,len)}...`
				} else {
					return val
				}
			},
			toNewDetails(path, id) {
				uni.navigateTo({
					url: `${path}?id=${id}`
				})
			},

			async getList() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				const res = await this.$get(`/biz/app/libraryPage`, {
					current: this.pager.currentPage,
					size: this.pager.maxResultCount,
					parentCategoryId: this.parentCategoryId,
					childCategoryId: this.childCategoryId,
					isMembers:JSON.parse(uni.getStorageSync('user')).level_id == 1 ? 1 : 0,//level_id == 1 是普通用户 ,其他的等级都是会员；isMembers是否为会员（0.是  1.否）
					title: this.searchKey,
				}, this.newUrl)
				console.log(res, 'res');
				if (res.data.data.total >= 0) {
					if (this.pager.currentPage == 1) {
						this.dadaList = []
					}
					this.dadaList = this.dadaList.concat(res.data.data.records)
				}
				this.mescroll.endBySize(res.data.data.records.length, res.data.data.total)
			},
			upCallback(page) {
				this.pager.currentPage = page.num; //在第几页
				this.pager.maxResultCount = page.size; //展示多少条数据
				this.getList()
			},
			downCallback(page) { // 下拉刷新
				this.mescroll.resetUpScroll();
			},
		}
	}
</script>
<style scoped>
	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		padding: 0 26rpx;
		box-sizing: border-box;
		background-color: #F0F0F0;
	}

	.serachBox {
		width: 100%;
		height: 64rpx;
		margin-top: 26rpx;
	}

	.items {
		width: 700rpx;
		height: 608rpx;
		background-color: #fff;
		border-radius: 16rpx;
		/* margin-bottom: 26rpx; */
		margin: 0 auto 26rpx;
		padding: 26rpx;
		box-sizing: border-box;
	}

	.itemsLeft {
		width: 100%;
		height: 420rpx;
		background: rgba(39, 53, 98, 0.37);
		margin-right: 26rpx;
	}


	.itemsRightTxt {
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		margin-top: 15rpx;

	}

	.itemsRightDate {

		font-family: Montserrat;
		font-size: 16px;
		font-weight: 400;
		line-height: 15px;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		margin-top: 15rpx;
	}

	.settings {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		margin-top: 32rpx;
	}

	.settingsItems {
		height: 64rpx;
		background-color: #fff;
		line-height: 64rpx;
		font-family: Montserrat;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: center;
		color: #273562;
		margin-left: 20rpx;
		padding: 0 20rpx;
		border-radius: 32rpx;
		margin-bottom: 20rpx;
	}

	.settingsItemszhong {
		background-color: #273562;
		color: #fff;
	}
</style>